<template>
   <div class="menu">
   	<div class="left_tree">
   		<div class="Cleft_header"><h2 class="Ctitle">导航菜单设置</h2></div>
		<zt-ztree v-if="menuList" ref="ztree" :ztreeData="menuList" :nodeChange="menuChange" :config="ztreeConfig" :beforeExpand="beforeExpand"></zt-ztree>
	</div>
				<div class="around_right_box">
				  <div class="menu_button">
	                <el-button type="primary" plain size="mini" @click="refresh()"><i class="iconfont icon-msnui-refresh-line"></i> 刷新</el-button>
	                <el-button type="primary" plain size="mini" @click="add()"><i class="iconfont icon-icon-"></i> 新建</el-button>
				    <el-button type="primary" plain size="mini" @click="edit()"><i class="iconfont icon-xiugai"></i> 修改</el-button>
				    <el-button type="primary" plain size="mini" @click="del()"><i class="iconfont icon-shanchu"></i> 删除</el-button>
				  </div>
				  <div class="menu_wrapper_table">
						<el-table
							ref="multipleTable"
							:data="childMenuList"
							tooltip-effect="dark"
							style="width: 100%"
							header-row-class-name="menu_table_header"
							stripe
							border
							highlight-current-row
							@selection-change="handleSelectionChange">
							<el-table-column
							type="selection"
							width="55">
							</el-table-column>
							<el-table-column label="标识" width="50">
								<template slot-scope="scope">
									<div style="text-align:center">
										<i class="iconfont icon-bumen1"></i>
									</div>
							</template>
						</el-table-column>
						<el-table-column prop="menuname" label="菜单名称"></el-table-column>
						<el-table-column prop="linkpath" label="链接"></el-table-column>
						<el-table-column label="状态" width="140">
							<template slot-scope="scope">
								{{statusItem[scope.row.disenable]}}
							</template>
						</el-table-column>
						<el-table-column prop="iconstyle" label="图标样式" width="260"></el-table-column>
					</el-table>
				</div>
				<edit-menu v-if="editFormVisible" :editFormVisible.sync="editFormVisible" :editSubmit="editSubmit" :editForm="editForm"></edit-menu>
				<add-menu v-if="addFormVisible" :addFormVisible.sync="addFormVisible" :addSubmit="addSubmit" :addForm="addForm"></add-menu>
		</div>
    </div>
</template>
<script>
import ztZtree from '@/components/z-tree/z-tree.vue'
import addMenu from './components/add-menu/add-menu.vue'
import editMenu from './components/edit-menu/edit-menu.vue'
export default {
  components:{
    ztZtree,
	addMenu,
	editMenu
	},
    data(){
      return {
        form:{},
        ztreeConfig:{
          id : 'menuid',
          pid:"menuparentid",
          name:'menuname',
          idIcon:"",
          pidIcon:""
        },
		menuList:'',
		childMenuList:[],
		addFormVisible:false,
		editFormVisible:false,
		addForm:{},
		editForm:{},
		selectNode:{},
		statusItem:{
			'0':'启用',
			'1':'禁用'
		},
		eidtForm:{},
		multipleSelection:[]
      }
    },
    methods:{
      getMenu(){
        this.$post("/menu/getMenuList",{},data => {
		        this.menuList = data;
        },err => {
            alert(err)
        });
	  },
	  refresh(){
		  this.menuChange(this.selectNode);
	  },
	  add(){
		  this.addFormVisible = true;
	  },
	  edit(){
		  if(this.multipleSelection.length != 1){
  			this.$message({
  				showClose: true,
  				message: '请选择一条数据修改！',
  				type: 'warning'
  			});
  			return
		  }
		  this.$post('/menu/getMenuinfo',{menuid:this.multipleSelection[0].menuid}, data => {
			  this.editForm = data;
			  this.editFormVisible = true;
		  }, error => {
		  });
	  },
	  del(){
      if(this.multipleSelection.length != 1){
			this.$message({
				showClose: true,
				message: '请选择一条数据进行删除！',
				type: 'warning'
			});
			return
		  }
      let items = [];
      _.each(this.multipleSelection,item =>{
        items.push(item.menuid);
      })
      this.$post('/menu/deleteMenu',{ids:items}, data => {
			  this.$message({
				message: '删除成功',
				type: 'success'
				});
        this.getMenu();
		  },error => {
			  this.$message.error(error);
		  });
	  },
    menuChange(node){
		  this.selectNode = node;
		  this.$post("/menu/getMenuChildList",{menuid:node.menuid},data => {
			this.childMenuList = data;
		  },error => {

		  });
      },
      beforeExpand(){
	    },
	  addSubmit(form){
		  let status = false;
		  _.each(form.childs, item => {
			  if(!item.childmenuname){
				  this.$message.error("按钮名称不能为空");
				  status = true;
				  return false
			  }
			  if(!item.visible){
				  this.$message.error("按钮状态不能为空");
				  status = true;
				  return false
			  }
			  if(!item.url){
				  this.$message.error("按钮url不能为空");
				  status = true;
				  return false
			  }
		  })
		  if(status){
			  return
		  }
      delete  form.status
      _.each(form.childs , item => {
          delete item.status
      });
		  let selectNode = this.selectNode;
		  form.menulayer = selectNode.menulayer + 1;
		  form.menuparentid = selectNode.menuid;
		  this.$post("/menu/saveMenu",form, data => {
			  this.addFormVisible = false;
				this.$refs.ztree.addNodes(this.selectNode,form);

                this.$message({
                    showClose: true,
                    message: '保存成功',
                    type: 'success'
                });
            },error => {
				this.$message.error(error);
            })
	  },
	  editSubmit(form){

      // console.log(this.selectNode);

      delete  form.status
      _.each(form.childs , item => {
          delete item.status
      });
      this.$post("/menu/updateMenu",form, data => {
        this.editFormVisible= false;
                this.$message({
                    showClose: true,
                    message: '修改成功',
                    type: 'success'
                });
        },error => {
				this.$message.error(error);
      })
	  },
	  handleSelectionChange(val){
		  this.multipleSelection = val;
	  }
    },
    mounted(){
	     this.getMenu();
	     this.selectNode = {
		       menuid:0,
		       menulayer:0
		   };
	     this.menuChange(this.selectNode);
    }
}
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>
